//mixin 封装 重复的代码  包括  data   methods  watch  钩子函数 ...
//在 各个组件中引入的时候，其实是将 mixin的内容 拷贝一份到 组件里,
//mixin中的代码和 组件中的代码，有时会有冲突，如果重名就导致组件的代码覆盖了mixin的代码
//vue 3.0  局部作用域
import { fetchBrandList, fetchCateList } from "@/api/product";

var productmixin = {
  data () {
    return {
      brandOptions: [], //商品品牌列表
      productCateOptions: [], //商品分类option的数据
      productCateValue: [], //选中的cate的数据
    }
  },
  mounted () {
    //调用 获取 品牌列表
    this.getBrandData();
    //调用 获取 分类列表
    this.getCateData();
  },
  watch: {
    //监听级联菜单的选中的数据是否发生变化了
    productCateValue (newV) {
      console.log(newV);
      //找到 数组的1号元素，赋值给 product_category_id
      this.listQuery.product_category_id = newV[1];
    },
  },
  methods: {
    //获取品牌列表
    async getBrandData () {
      var res = await fetchBrandList();
      //console.log(res);
      this.brandOptions = res.data;
    },
    //获取 分类列表数据
    async getCateData () {
      var res = await fetchCateList();
      console.log(res);
      //重组数据
      var data = res.data;
      data.forEach((i) => {
        let children = []; //放子节点数据
        //重组子级节点数据
        i.children.forEach((j) => {
          children.push({
            label: j.name,
            value: j.id,
          });
        });
        this.productCateOptions.push({
          label: i.name,
          value: i.id,
          children: children,
        });
      });
      //console.log(this.productCateOptions);
    },
  }
}

//导出
export default productmixin;